<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>逸思精品</title>

    <!-- jQuery-->
    <script type="text/javascript" src="/plugins/jquery/jquery-3.6.0.min.js"></script>
    <script th:src="@{/js/layuiadmin-1.2.1/layui/layui.js}"></script>
    <script th:src="@{/dhecp/js/dh-ui.js}"></script>
    <script th:src="@{/dhecp/js/dh-common.js?v=53}"></script>

    <!-- layui-->
    <link rel="stylesheet" href="/plugins/layui/2.7.6/css/layui.css" media="all">
    <script src="/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>

    <!-- 基于laiui的表格 -->
    <script type="text/javascript" src="/plugins/layui/extends/sku/simple_table_choiceshop_allot.js"></script>

    <style>
        body {
            font-family: 微软雅黑;
        }

        .layui-col-md12 {
            width: 100%;
        }

        .layui-form-label {
            width: 130px;
            position: relative;
            float: left;
            display: block;
            padding: 9px 15px;
            font-weight: 400;
            line-height: 20px;
            text-align: right;
        }

        .layui-form input[type=radio] {
            display: block;
        }

        .layui-input-block {
            margin-left: 130px;
        }

        .layui-input-block, .layui-input-inline {
            position: relative;
        }

        .layui-input, .layui-textarea {

        }

        .layui-form-item {
            text-align: center;
            margin-bottom: 5px;
            font-size: 13px;
            height: 30px;
        }

        .header {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #fff;
            z-index: 999;
        }

        .header .headcon {
            width: 1200px;
            margin: auto;
            display: flex;
            align-items: center;
            color: #1E9FFF;
            padding: 30px 0;
        }

        .headcon .title {
            font-size: 36px;
            font-weight: 700;
        }

        .szbtn {
            background-color: #1E9FFF;
            color: #fff;
            position: absolute;
            font-size: 14px;
            padding: 5px 15px;
            border-radius: 10px;
            position: absolute;
            top: 10;
            right: 20px;
            cursor: pointer;
        }

        .btn-db {
            border: none;
            background-color: #1E9FFF;
            color: #fff;
            font-size: 14px;
            padding: 5px 15px;
            border-radius: 10px;
        }

        .tit {
            font-size: 18px;
        }

        .tit::before {
            content: '●';
            margin-right: 10px;
        }

        .jcinfo {
            font-size: 30px;
            font-weight: 900;
        }

        .item {
            display: flex;
            align-items: center;
            font-size: 16px;
        }

        .item3 {
            display: flex;
            align-items: center;
            font-size: 16px;
        }

        .item3 div {
            width: 33%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .item4 {
            display: flex;
            align-items: center;
        }

        .item4 div {
            width: 25%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .layui-table {
            color: black;
        }

        .layui-table thead th {
            background-color: rgb(0 135 250 / 40%) !important;
            height: 38px
        }

        .layui-table thead tr {
            background-color: rgb(0 135 250 / 40%) !important;
            height: 38px
        }

        .img-border {
            border: solid 1px;
        }

        .img-type::before {
            margin-right: 10px;
        }
    </style>
	<style>
		.footer-view{
			box-sizing: border-box;
			width: 70px;
			text-align: center;
			line-height: 70px;
			/* 关键代码 */
			height:80px;
			/* 底部固定关键代码 */
			position: fixed;
			bottom: 20px;
			right: 0;
			margin-right: 300px;
		}
		.footer{
			border: none;
			border-radius: 15px;
			background-color: #27888F;
			opacity: 0.6;
			color: white;
			cursor: pointer;
			width: 70px;
			height: 70px;
			margin: 0 auto;
			font-weight: 600;
			font-size: 20px;
			box-shadow: #D2D8E0 2px 2px 2px 2px ;
		}
		.eKnowAiBtn{
			opacity: 1;
		}
		
		.num_cart{
			position: absolute;
			margin-left: -5px;
			margin-top: -10px;
			font-size: 12px;
			color: #fff;
			background: #ff0000;
			text-align: center;
			box-shadow: 0 0 0 1px #fff;
			border-radius: 10px;
			padding: 0;
			width: 24px;
			height: 24px;
			line-height: 24px;
			display: inline-block;
		}
	</style>
</head>
<body style="background-color: #f4f4f4 !important;">
<div class="header">
    <div class="headcon">
        <div class="title">逸思精品</div>
    </div>
</div>

<div style="width: 100%;height:130px">
</div>

<div style="margin: 0 auto; max-width: 1140px; background-color: #fff; padding: 30px 0;">
    <div class="layui-row">
        <div class="layui-col-xs3" style="padding-left: 10px;">
            <div style="margin: 10px 0; z-index: 1;">
                <img style="width: 280px; height: 280px; display: inline-block; vertical-align: middle;"
                     th:src="${dto.img}">
                <div style="z-index: 2; position: absolute; left: 10px;; top: 10px;">
                    <img th:if="${dto.vtype} eq '新品'" style="width: 40px; height: 40px;" src="/img/xinpin.png">
                    <img th:if="${dto.vtype} eq '爆品'" style="width: 40px; height: 40px;" src="/img/baopin.png">
                </div>
            </div>
            <div style="border: solid 1px;">
                <video controls autoplay width="100%">
                    <source th:src="${dto.linkVideo}" type="video/mp4">
                    Sorry, your browser doesn't support embedded videos.
                </video>
            </div>
            <div style="margin: 10px 0;">
                <div th:each="merge: ${dto.mergeArr}">
                    <img th:if="${merge.isSelected}" class="img-type img-border"
                         style="width: 70px; height: 70px; display: inline-block; vertical-align: middle; float:left; cursor: pointer;"
                         th:src="${merge.img}" th:onclick="location.href='[(${merge.link})]'">
                    <img th:if="${merge.isSelected} eq false" class="img-type"
                         style="width: 70px; height: 70px; display: inline-block; vertical-align: middle; float:left; cursor: pointer;"
                         th:src="${merge.img}" th:onclick="location.href='[(${merge.link})]'">
                </div>
            </div>
        </div>
        <div class="layui-col-xs9">
            <div th:if="${extraButton.jpszbtn}" class="szbtn" style="right:120px;" th:onclick="costbtn('[(${dto.code})]')">设置</div>
            <div th:if="${extraButton.gdxxbtn}" class="szbtn" th:onclick="xxbtn('[(${dto.code})]')">更多信息</div>

            <div style="margin: 0 30px;">
                <div class="jcinfo">
                    <div style="margin-bottom: 5px; width: 80%;">
                        <span>[[${dto.name}]]</span>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span style="font-size: 24px;">[[${dto.code}]]</span>
                    </div>
                </div>
                <div style="width: 100%; border-top:0.5px dashed rgb(0 135 250 / 40%) !important; border-bottom: 0; margin: 5px 0;"></div>
                <div style="text-align: right; font-size: 18px; font-weight: 700; color: #FF5722;">
                    历史调拨量：[[${dto.numAllot}]]
                </div>

                <div style="height: 20px;"></div>
                <div class="tit" style="font-weight: 700;">商品价格：</div>
                <div style="width: 100%; border-top:0.5px dashed rgb(0 135 250 / 40%) !important; border-bottom: 0; margin: 5px 0;"></div>
                <div style="height: 10px;"></div>
                <div class="item3">
                    <div style="text-align: center;" th:each="price: ${dto.priceArr}">
                        <div style="text-align: center; width: 100%; font-size: 36px; font-weight: 700; color: #FF5722;">
                            [[${price.percentText}]]
                        </div>
                        <div style="text-align: center; width: 100%; font-size: 12px; font-weight: 400;">
                            [[${price.condText}]]
                        </div>
                    </div>
                </div>

                <div style="height: 30px;"></div>
                <div class="tit" style="font-weight: 700;">商品信息：</div>
                <div style="width: 100%; border-top:0.5px dashed rgb(0 135 250 / 40%) !important; border-bottom: 0; margin: 10px 0;"></div>
                <div class="item3">
                    <div>商品材质：<span>[[${dto.material}]]</span></div>
                    <div>商品尺寸(cm)：<span>[[${dto.sizePackage}]]</span></div>
                    <div> 商品重量(g)：<span>[[${dto.weightPackage}]]</span></div>
                </div>
                <div class="item3">
                    <div> 包装尺寸(cm)：<span>[[${dto.size}]]</span></div>
                    <div> 包装重量(g)：<span>[[${dto.weight}]]</span></div>
                    <div> <span></span></div>
                </div>
                <div class="item">
                    <div>商品竞争优势：<p style="white-space: pre-wrap;">[[${dto.advantage}]]</p></div>
                </div>

                <div style="height: 30px;"></div>
                <div class="tit" style="font-weight: 700;">商品分析：</div>
                <div style="width: 100%; border-top:0.5px dashed rgb(0 135 250 / 40%) !important; border-bottom: 0; margin: 10px 0;"></div>
                
                <div class="item3">
                    <div>美国建议售价($)：[[${dto.usa.retailPrice}]]</div>
                    <div>预估毛利率(%)：[[${dto.usa.grossMargin}]]</div>
                    <div>预估毛利润($)：[[${dto.usa.capitalOutoutRatio}]]</div>
                </div>
                <div class="item3">
                    <div>美国最低售价($)：[[${dto.usa.floorPrice}]]</div>
                    <div>成本(¥)：[[${dto.usa.cost}]]</div>
                    <div>FBA配送费($)：[[${dto.usa.deliveryFee}]]</div>
                </div>
                <div style="height: 20px;"></div>

				<div class="item3">
                    <div>英国建议售价(£)：[[${dto.uk.retailPrice}]]</div>
                    <div>预估毛利率(%)：[[${dto.uk.grossMargin}]]</div>
                    <div>预估毛利润(£)：[[${dto.uk.capitalOutoutRatio}]]</div>
                </div>
                <div class="item3">
                    <div>英国最低售价(£)：[[${dto.uk.floorPrice}]]</div>
                    <div>成本(¥)：[[${dto.uk.cost}]]</div>
                    <div>FBA配送费(£)：[[${dto.uk.deliveryFee}]]</div>
                </div>
                <div style="height: 20px;"></div>

                <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">竞品链接(美国)：<a
                        style="text-decoration: underline;" th:href="${dto.linkJPUS}" target="_blank">[[${dto.linkJPUS}]]</a></div>
                <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">竞品链接(英国)：<a
                        style="text-decoration: underline;" th:href="${dto.linkJP}" target="_blank">[[${dto.linkJP}]]</a></div>

            </div>
        </div>
    </div>

    <div style="height: 20px;"></div>
    <div style="padding: 10px;">
        <div class="tit" style="font-weight: 700;">调货信息：</div>
        <div style="width: 100%; border-top:0.5px dashed rgb(0 135 250 / 40%) !important; border-bottom: 0; margin: 5px 0;"></div>

        <div style="width:100%;">
            <div id="simple_table_choiceshop_allot">
            </div>
        </div>
        <script th:inline="javascript">
            var tableOfChoiceshopAllot = null;
            //使用layui的sku模块
            layui.use(['form', 'simple_table_choiceshop_allot', 'jquery'], function () {
                var $ = layui.jquery, simple_table_choiceshop_allot = layui.simple_table_choiceshop_allot,
                    form = layui.form;

                tableOfChoiceshopAllot = simple_table_choiceshop_allot.init({
                    id: 'simple_table_choiceshop_allot',
                    data: $.parseJSON(JSON.stringify([[${dto.detailArr}]])),
                    prices: $.parseJSON(JSON.stringify([[${dto.prices}]]))
                });
            });
        </script>
    </div>

    <div style="width: 100%; background-color: #FDF5E6;">
        <div>
            <div style="color: #FF5722; width: 60%; float: left; text-align: left; height: 40px; line-height: 40px;">
            	<div style="margin-left: 10%;">
            		<span>备注：[[${dto.remark}]]</span>
                </div>
            	<div style="margin-left: 10%;">
                </div>
            </div>
            <div style="color: #FF5722; float: left; font-weight: 900; width: 35%; text-align: right; display: inline-block; padding: 0 20px; font-size: 18px;">
                总金额(¥)：<span style="font-size: 36px;" id="id_total_price">--</span>&nbsp;&nbsp;&nbsp;<span
                    style="font-size: 18px;">(总数量：<span id="id_total_num">--</span>)</span>
            </div>
        </div>
        <!-- <div style="width: 95%; text-align: right; padding: 5px 20px;">
            <form class="layui-form" id="formId" method="post" action="/hr/choiceshop/editSetting">
                <button type="button" class="btn-db" lay-submit lay-filter="formSubmit">调拨</button>
            </form>
        </div> -->
        <div style="width: 95%; text-align: right; padding: 5px 20px;">
            <form class="layui-form" id="formId" method="post" action="/hr/choiceshop/editSetting">
                <button type="button" class="btn-db" lay-submit lay-filter="formSubmit">加入购物车</button>
            </form>
        </div>
    </div>

    <div style="height: 50px;"></div>
    <div class="item4" style="width: 100%;">
        <div style="text-align: center;" th:each="img: ${dto.imgArr1}">
            <img style="width:280px; height: 280; display: inline-block; vertical-align: middle; float:left;"
                 th:src="${img}">
        </div>
    </div>

    <div class="item4" style="width: 100%;">
        <div style="text-align: center;" th:each="img: ${dto.imgArr2}">
            <img style="width:280px; height: 280; display: inline-block; vertical-align: middle; float:left;"
                 th:src="${img}">
        </div>
    </div>
</div>

<div class="footer-view">
	<div class="footer" id="eKnowAi" onclick="toCart()">
		<img alt="" src="/img/jingpin/cart.png" width="80%">
		<span id="id_num_cart" class="layui-badge num_cart">[[${dto.numProductOnCart}]]</span>
	</div>
</div>

<script type="text/html" id="inExchange">
    <div class="layui-col-md12">
        <div class="layui-form-item" style="margin-top: 15px;">
            <div class="layui-inline" style="display: flex;">
                <label class="layui-form-label"><span style="color: red">*</span>调拨公司：</label>
                <div class="layui-input-block" style="margin-left: 0; position: relative;">
                    <input type="text" class="layui-input buttontext" style="width: 250px;"
                           name="vGsMc" id="vGsMc" autocomplete="off"
                           readonly lay-verify="required"/>
                    <i class="layui-icon layui-icon-more getMore" style="position: absolute;top: 11px;right: 9px;"
                       onclick="getMore('vGsMc',null,'公司名称',null,false, true);"
                       getType="promoteUnit"></i>
                </div>
            </div>
            <div style="color: red;text-align:center;margin-top: 25px; font-size: 16px; padding: 10px;">
				<div style="color: red;text-align:left; margin-left: 80px;">
                	<span>特别提醒：<br>1、逸思精品调拨后，不可退回！<br>2、请确认好调拨信息再执行操作！<br>3、该操作一经确定即完成调拨！</span>
				</div>
            </div>
        </div>
    </div>
</script>

<script th:inline="javascript">
    // var prefix = ctx + "hr/choiceshop";
    var extraButton = [[${extraButton}]]

    var gridColumns = null;
    var moduleTable = null;
    var vGsMc = "",
        vGsBm = "",
        vGsJc = "";
</script>

<script type="text/javascript">
	/*
	* 购物车悬浮框鼠标移动效果
	*/
	$("#eKnowAi").mouseover(function() {
		$("#eKnowAi").addClass("eKnowAiBtn");
	});
	$("#eKnowAi").mouseout(function() {$("#eKnowAi").removeClass("eKnowAiBtn");});

    var $, layer, laydate, form, table, wherestr = {};
    layui.use(['table', 'laydate', 'form', 'layer', 'jquery', 'element', 'laypage'], function () {
        $ = layui.$, layer = layui.layer, laydate = layui.laydate , form = layui.form, table = layui.table, element = layui.element, laypage = layui.laypage;
        
        window.xxbtn = function (code) {
        	
            $.get("/hr/choiceshop/allotList", {//判断是否存在调拨信息
                'code': code
            }, function (res) {
                console.log("res", res.data.length)
                if (res.data.length > 0) {
                    window.open("/business/productcarefullychosen/edit?code=" + code)
                } else {
                    return layer.msg('未调拨该商品无法查看')
                }
            });

        }

        $('body').on('click', '.btn-db', function () {
            let choiceShop = tableOfChoiceshopAllot.getData()
            let nums = $('#id_total_num').html() * 1
            if (!nums > 0) {
                $.modal.msgWarning('请选择至少一种商品！');
                return
            }
        	
        	// 判断数量是否足够调拨
        	if(tableOfChoiceshopAllot.isAbleAllot() == false) {
                layer.msg('不能低于最少数量')
        		return;
        	}
        	layer.confirm('确定加入购物车？', function(index){
				layer.close(index);
                showloadings(true);

                $.post("/hr/choiceshop/addToCart", {
                    'choiceShop': JSON.stringify(choiceShop)
                }, function (res) {
                	console.log('res---', res);
                    showloadings(false);
                    layer.closeAll()
                    layer.msg(res.msg)
                    $('#id_num_cart').html(res.data);
                });
			});
        	return;
        })
    });

    function costbtn(code) {
        layer.open({
            type: 2,
            title: "设置精品数据",
            area: ['95%', '90%'],
            content: '/hr/choiceshop/toSetting?code=' + code
        });
        return;
    }


    function getMoreAfter(fieldsList, fields, tindex, fieldName, fieldSearchType, isSearch, isLayer, res) {//弹出框回调事件
        if (res) {
            $("#vGsMc").val(res.vGsMc);
            vGsMc = res.vGsMc
            vGsBm = res.vGsBm
            vGsJc = res.vGsJc
        }
    }
    
    /*
    * 弹出购物车页面
    */
	function toCart() {
		layer.open({
			type: 2,
			title: "逸思精品购物车",
			area: ['80%', '80%'],
			content: '/hr/choiceshop/toCart'
		});
	}
</script>
</body>
</html>